<html><head><title> Charts </title><script src='https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.umd.min.js'></script><script src='https://cdn.jsdelivr.net/npm/moment@2.30.1/moment.min.js'></script><script src='https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.1/dist/chartjs-adapter-moment.min.js'></script><script src='https://hammerjs.github.io/dist/hammer.js'></script><script src='https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.2.0/dist/chartjs-plugin-zoom.min.js'></script><style>body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 20px; background-color: #f9f9f9; }.container { max-width: 1200px; margin: 0 auto; }.chart-card { background-color: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); padding: 20px; margin-bottom: 30px; }h2 { color: #333; text-align: center; }canvas { width: 100% !important; height: 350px !important; margin: 20px 0; }</style></head><body><div class='container'><h2>AK值趋势分析</h2>
<div class='chart-card'><h3>AK值点趋势图</h3><canvas id='main_chart_0'></canvas></div><div class='chart-card'><h3>AK值日趋势图</h3><canvas id='sub_chart_0'></canvas></div><script>document.addEventListener('DOMContentLoaded', function() {const mainLabels = ['2020-01-08 00:00:00', '2020-01-08 03:00:00', '2020-01-08 06:00:00', '2020-01-08 08:00:00', '2020-01-08 11:00:00', '2020-01-08 14:00:00', '2020-01-08 16:00:00', '2020-01-08 19:00:00', '2020-01-08 22:00:00'];const mainData = {labels: mainLabels, datasets: [{ label: 'AK值点趋势图', data: [114.71, 116.25, 118.82, 113.16, 116.25, 113.16, 112.65, 116.25, 116.76],borderColor: '#36A2EB',
                    backgroundColor: 'rgba(54, 162, 235, 0.1)',
                    fill: true,
                    tension: 0.4,
                    pointRadius: 4,
                    pointBackgroundColor: '#36A2EB'}]};const subLabels = ['2020-01-01', '2020-01-02', '2020-01-03', '2020-01-04', '2020-01-05', '2020-01-06', '2020-01-07'];const subData = {labels: subLabels, datasets: [{ label: 'AK值日级', data: [114.12, 112.65, 112.42, 114.31, 112.25, 113.11, 113.39],borderColor: '#FF6384',
                    backgroundColor: 'rgba(255, 99, 132, 0.1)',
                    fill: true,
                    tension: 0.4,
                    pointRadius: 4,
                    pointBackgroundColor: '#FF6384'}]};const mainCtx = document.getElementById('main_chart_0').getContext('2d');const mainChart = new Chart(mainCtx, {    type: 'line',    data: mainData,    options: {        responsive: true,        maintainAspectRatio: false,        animation: { duration: 0 },        scales: {            x: {                type: 'time',                time: {                    unit: 'hour',                    displayFormats: { hour: 'HH:mm' },                    tooltipFormat: 'YYYY-MM-DD HH:mm:ss'                },                title: {                    display: true,                    text: '时间'                }            },            y: {                beginAtZero: false,                min: 111.42,                max: 120.05,                title: {                    display: true,                    text: 'AK值'                },                ticks: {                    callback: function(value) {                        return value.toFixed(1);                    }                }            }        },        plugins: {            legend: {                position: 'top',            },            tooltip: {                mode: 'index',                intersect: false,                callbacks: {                    label: function(context) {                        return 'AK值: ' + context.raw.toFixed(2);                    }                }            },            zoom: {
                pan: {
                    enabled: true,
                    mode: 'x'
                },
                zoom: {
                    wheel: { enabled: true },
                    pinch: { enabled: true },
                    mode: 'x'
                }
            }        }    }});const subCtx = document.getElementById('sub_chart_0').getContext('2d');const subChart = new Chart(subCtx, {    type: 'line',    data: subData,    options: {        responsive: true,        maintainAspectRatio: false,        animation: { duration: 0 },        scales: {            x: {                type: 'time',                time: {                    unit: 'day',                    displayFormats: { day: 'YYYY-MM-DD' },                    tooltipFormat: 'YYYY-MM-DD'                },                title: {                    display: true,                    text: '日期'                }            },            y: {                beginAtZero: false,                min: 111.84,                max: 114.72,                title: {                    display: true,                    text: 'AK值'                },                ticks: {                    callback: function(value) {                        return value.toFixed(1);                    }                }            }        },        plugins: {            legend: {                position: 'top',            },            tooltip: {                mode: 'index',                intersect: false,                callbacks: {                    label: function(context) {                        return 'AK值: ' + context.raw.toFixed(2);                    }                }            },            zoom: {
                pan: {
                    enabled: true,
                    mode: 'x'
                },
                zoom: {
                    wheel: { enabled: true },
                    pinch: { enabled: true },
                    mode: 'x'
                }
            }        }    }});window.addEventListener('resize', function() { mainChart.resize(); subChart.resize(); });});</script>
</div></body></html>